<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;height: 100%;overflow-y: auto">
			<view class="content-box">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
						:volume-icon="false" font-size="20"></u-notice-bar>
				</view>

				<view class="form-box">
					<u-form :label-style="labelStyle">
						<u-form-item label="起送人"><u-input input-align="right" v-model="formdata.delivery" /></u-form-item>
						<u-form-item label="联系方式"><u-input input-align="right" v-model="formdata.deliveryPhone" /></u-form-item>
					</u-form>
					<view class="form-item">
						<view class="flex-row justify-between items-center section_2">
							<view class="flex-row">
								<image class="shrink-0 image_4" src="/static/index/location-light.png" />
								<text class="font_3 text_2 ml-9">出发地</text>
							</view>
							<view class="flex-row items-center" v-if="!formdata.deliveryAddress">
								<view class="flex-col justify-start items-center shrink-0 text-wrapper_2" @click="handleToAddress"><text
										class="font_2">地址簿</text>
								</view>
								<text class="ml-10 font_4" @click="getDeliveryAddress">点击选择</text>
							</view>
							<u-input v-else :custom-style="inputStyle" input-align="right" v-model="formdata.deliveryAddress" />
						</view>
					</view>
					<view class="form-item">
						<view class="flex-row justify-between items-center section_2">
							<view class="flex-row">
								<image class="shrink-0 image_4" src="/static/index/time.png" />
								<text class="font_3 text_2 ml-9">出发时间</text>
							</view>
							<view class="flex-row items-center">
								<u-input :custom-style="inputStyle" input-align="right" placeholder="请输入"
									v-model="formdata.deliveryTime" disabled @click="showTime = true" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<form-item-title text="宠物信息">
				<template v-slot:right>
					<view class="addpet">
						新增<image style="width: 40rpx;height: 40rpx;" src="/static/index/add.png" mode="" @click="addPet"></image>
					</view>
				</template>
			</form-item-title>
			<view class="content-box" v-for="(item,index) in petsdata" :key="index">
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">宠物{{index+1}}</text>
						</view>
						<u-upload :header="header" :action="action"
							@on-success="(data, oindex, fileList) => successPhoto(data, oindex, fileList, index)"
							@on-remove="(oindex, fileList) => removePhoto(oindex, fileList, index)" height="136" width="136"
							max-count="3"></u-upload>
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">宠物照片</text>
						</view>
						<u-form-item label="宠物名"><u-input input-align="right" v-model="petsdata[index].name" /></u-form-item>
						<u-form-item label="年龄"><u-input type="number" input-align="right" disabled @click="changeAge(index)"
								v-model="petsdata[index].age" placeholder="请选择" /></u-form-item>
						<u-form-item label="品种"><u-input input-align="right" v-model="petsdata[index].breed" /></u-form-item>
						<u-form-item label="体重(kg)"><u-input type="number" input-align="right"
								v-model="petsdata[index].weight" /></u-form-item>
						<u-form-item label="疫苗接种信息"><u-switch slot="right" active-color="#FCD610"
								v-model="petsdata[index].ifVaccination"></u-switch></u-form-item>
					</u-form>
				</view>
			</view>
			<form-item-title text="接收方信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<u-form-item label="接收人"><u-input input-align="right" v-model="formdata.recipient" /></u-form-item>
						<u-form-item label="联系方式"><u-input input-align="right" v-model="formdata.recipientPhone" /></u-form-item>
						<u-form-item label="接收地址"><u-input input-align="right" v-model="formdata.receivingAddress" disabled
								@click="getReceivingAddress" /></u-form-item>
					</u-form>
				</view>
			</view>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="备注" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" v-model="formdata.remark" />
					</u-form-item>
				</view>
			</view>
			<view class="flex-col justify-center items-center">
				<view class="flex-row justify-center items-center" style="margin-bottom: 24rpx;">
					<u-checkbox v-model="checked" active-color="#FCD610" :label-disabled="false">我已阅读并同意</u-checkbox>
					<view class="flex-row justify-center items-center">
						<text @click="handleToLink('/page_index/me/components/privacy-agreement/privacy-agreement')">《隐私协议》</text>和<text
							@click="handleToLink('/page_index/me/components/account-agreement/account-agreement')">《用户协议》</text>
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<view class="form-box">
					<view class="flex-row justify-between items-center group_16">
						<view class="flex-col button_3">
							<text class="self-start font_3 text_28">行程预算</text>
							<view class="flex-row items-center self-stretch section_11 mt-7">
								<text class="text_31">￥</text>
								<input class="ml-2 text_30" type="digit" :value="formdata.price" @input="changeInput"></input>
							</view>
						</view>
						<view class="flex-col justify-start items-center button_4" @click="handleSubmit"><text
								class="font text_29">发布行程</text></view>
					</view>
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="showTime" :params="timeParams" @confirm="handletimeconfirm"></u-picker>
		<u-select v-model="selectageshow" mode="mutil-column" :list="agelist" @confirm="ageconfirm"></u-select>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import petBasi from "../../../api/petBasi.js";
	import utils from "../../../utils/util.js";
	const app = getApp()
	export default {
		data() {
			return {
				list: [
					'温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。'
				],
				action: this.$config.mobeilURL + "/common/uploadFile", // 演示地址
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap"
				},
				inputStyle: {
					fontSize: "24rpx",
					minHeight: "44rpx",
					lineHeight: "44rpx"
				},
				checked: true,
				photoList: [
					[]
				],
				petsdata: [{
					age: "",
					breed: "",
					colour: "",
					ifVaccination: "",
					name: "",
					photo: "",
					weight: "",
				}],
				formdata: {
					delivery: "",
					deliveryAddress: "",
					deliveryAddressLat: "",
					deliveryAddressLng: "",
					deliveryPhone: "",
					deliveryTime: "",
					lat: 0,
					lng: 0,
					petPlanPetInfos: [],
					price: "",
					publisherId: "",
					remark: "",
					receivingAddress: "",
					receivingAddressLat: "",
					receivingAddressLng: "",
					recipient: "",
					recipientPhone: "",
				},
				showTime: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				header: {
					"content-type": "multipart/form-data",
					"Authorization": uni.getStorageSync('cxbtoken')
				},
				currentIndex: -1,
				selectageshow: false,
				agelist: [
					[],
					[{
						value: '年',
						label: '年'
					}],
					[],
					[{
						value: '月',
						label: '月'
					}],
				]
			}
		},
		onLoad() {
			for (let i = 0; i <= 100; i++) {
				this.agelist[0].push({
					value: i,
					label: i
				})
			}
			for (let i = 0; i < 12; i++) {
				this.agelist[2].push({
					value: i,
					label: i
				})
			}
		},
		onShow() {
			if (app.globalData.startaddress) {
				const address = app.globalData.startaddress;
				this.formdata.deliveryAddress = `${address.address}${address.houseNumber}`;
				this.formdata.deliveryAddressLat = address.lat;
				this.formdata.deliveryAddressLng = address.lng;
				app.globalData.startaddress = undefined;
			}
		},
		methods: {
			addPet() {
				this.petsdata.push({
					age: "",
					breed: "",
					colour: "",
					ifVaccination: "",
					name: "",
					photo: "",
					weight: "",
				});
				this.photoList.push([])
			},
			handletimeconfirm(val) {
				this.formdata.deliveryTime = `${val.year}-${val.month}-${val.day} ${val.hour}:${val.minute}:00`;
			},
			successPhoto(data, index, lists, cIndex) {
				if (data.code !== 200) {
					lists[index].error = true
				} else {
					this.photoList[cIndex].push(data.accessPath);
				}
			},
			removePhoto(index, lists, cIndex) {
				this.photoList[cIndex].splice(index, 1)
			},
			//定位起送地
			getDeliveryAddress() {
				utils.chooseLocationInfo().then((res) => {
					this.formdata.lat = res.longitude;
					this.formdata.lng = res.latitude;
					this.formdata.deliveryAddressLat = res.longitude;
					this.formdata.deliveryAddressLng = res.latitude;
					this.formdata.deliveryAddress = res.name;
				});
			},
			//目的地
			getReceivingAddress() {
				utils.chooseLocationInfo().then((res) => {
					this.formdata.receivingAddressLat = res.longitude;
					this.formdata.receivingAddressLng = res.latitude;
					this.formdata.receivingAddress = res.name;
				});
			},
			changeInput(e) {
				this.formdata.price = e.detail.value
			},
			handleSubmit() {
				if (!this.checked) {
					uni.showToast({
						title: '请先同意协议',
						icon: "none"
					})
					return;
				}
				this.formdata.lng = `${this.formdata.lng}`;
				this.formdata.lat = `${this.formdata.lat}`;
				for (let i = 0; i < this.petsdata.length; i++) {
					this.petsdata[i].photo = this.photoList[i].join(',')
				}
				this.formdata.petPlanPetInfos = this.petsdata;
				uni.showLoading({
					title: '发布中'
				})
				petBasi
					.addPetPlan(this.formdata)
					.then((res) => {
						uni.hideLoading();
						if (res.code === 0) {
							uni.showToast({
								title: '发布成功',
								icon: "none"
							})
						} else {
							uni.showToast({
								title: '发布失败',
								icon: "error"
							})
						}
						uni.navigateBack()
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: '发布失败',
							icon: "error"
						})
					});
			},
			changeAge(index) {
				this.currentIndex = index;
				this.selectageshow = true;
			},
			ageconfirm(e) {
				let strage = '';
				if (e[0].value != 0)
					strage = strage + e[0].value + e[1].value
				if (e[2].value != 0)
					strage = strage + e[2].value + '个' + e[3].value
				this.petsdata[this.currentIndex].age = strage
			},
			handleToAddress() {
				uni.navigateTo({
					url: '/page_index/me/components/address/address?urlname=startaddress',
				})
			},
			handleToLink(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;
		overflow-y: auto;

		.content-box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.notice-box {
				padding: 24rpx;
			}

			.form-box {
				padding: 0 32rpx 32rpx 32rpx;
				margin-bottom: 40rpx;

				.form-item {
					margin-top: 24rpx;

					.ml-9 {
						margin-left: 18rpx;
					}

					.section_2 {
						padding: 26rpx 36rpx 26rpx 44rpx;
						background-color: #ffd6000d;
						border-radius: 16rpx;

						.image_4 {
							width: 24rpx;
							height: 28rpx;
						}

						.font_3 {
							font-size: 28rpx;
							font-family: PingFang SC;
							line-height: 25.76rpx;
							font-weight: 700;
							color: #000000;
						}

						.text_2 {
							line-height: 26.12rpx;
						}

						.text-wrapper_2 {
							padding: 12rpx 0;
							background-color: #fbd610;
							border-radius: 8rpx;
							overflow: hidden;
							width: 100rpx;
							height: 44rpx;

							.font_2 {
								font-size: 20rpx;
								font-family: PingFang SC;
								line-height: 18.4rpx;
								color: #000000;
							}
						}

						.font_4 {
							font-size: 24rpx;
							font-family: PingFang SC;
							line-height: 22.1rpx;
							color: #666666;
						}
					}
				}

				.group_6 {
					padding: 32rpx 0;
					border-bottom: solid 2rpx #f3f3f3;

					.font_3 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 25.76rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_7 {
						line-height: 26.02rpx;
					}

					.image-wrapper {
						background-color: #ececec;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 100rpx;
						font-size: 30px;
						color: #999999
					}
				}
			}

		}

		/deep/ .u-add-tips {
			display: none;
		}

		.bottom-box {
			padding: 16rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.mt-7 {
				margin-top: 14rpx;
			}

			.group_16 {
				padding-left: 36rpx;
				padding-right: 28rpx;

				.button_3 {
					width: max-content;

					.font_3 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 22.4rpx;
						font-weight: 700;
						color: #666666;
					}

					.text_28 {
						color: #000000;
					}

					.section_11 {
						padding: 6rpx 20rpx;
						background-color: #f6f6f6;
						border-radius: 60rpx;

						.text_31 {
							color: #000000;
							font-size: 24rpx;
							line-height: 17.72rpx;
						}

						.text_30 {
							color: #ff7676;
							font-size: 40rpx;
							line-height: 28.48rpx;
							width: 180rpx;
						}
					}
				}

				.button_4 {
					padding: 28rpx 0;
					background-color: #fbd610;
					border-radius: 68rpx;
					width: 318rpx;
					height: 84rpx;

					.font {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 30.02rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_29 {
						line-height: 29.88rpx;
					}
				}
			}
		}

		.addpet {
			display: flex;
			align-items: center;
		}
	}
</style>